<template>
	<view class="info">
		<view class="_image" v-show="$store.state.user.user.logons">
			<view class="tou">
					<image src="../../static/img/user/avatar.jpg"></image>
				<view>{{getUser.userName}}</view>
			</view>
			<navigator url="/pagesF/set/set" open-type="navigate">
				<image  class="img2" src="../../static/img/user/shezhi.png"></image>
			</navigator>
		</view>
		<view class="_login" v-show="$store.state.user.user.logons == false">
			<navigator url="/pagesG/logn/logn" open-type="navigate">
				<u-button>登录/注册</u-button>
			</navigator>
		</view>
		<view class="grid">
			<view class="g-header" @click="gotoOrder(0)">
				<image src="../../static/img/user/icon-order.png"></image>
				<view class="g-text">
					<view>全部订单</view>
					<u-icon name="arrow-right" label-pos="right"></u-icon>
				</view>
			</view>
			<view class="gs">
				<view class="g1" @click="gotoOrder(1)">
					<image src="../../static/fukuan.png"></image>
					<view>待付款</view>
				</view>
				<view class="g1"  @click="gotoOrder(2)">
					<image src="../../static/liwu.png"></image>
					<view>待发货</view>
				</view>
				<view class="g1"  @click="gotoOrder(3)">
					<image src="../../static/shouhuo.png"></image>
					<view>待收货</view>
				</view>
				<view class="g1"  @click="gotoOrder(4)"> 
					<image src="../../static/pingjia.png"></image>
					<view>待评价</view>
				</view>
				<view class="g1"  @click="gotoOrder(0)">
					<image src="../../static/quanbu.png"></image>
					<view>全部</view>
				</view>
			</view>
		</view>
		<view class="iconList">
			<view class="ico-ul">
			<view class="ico-li" @click="addr()">
				<image src="../../static/img/user/icon-address.png"></image>
				<view class="li-text">
					<view>收货地址</view>
					<u-icon name="arrow-right" label-pos="right"></u-icon>
				</view>
			 </view>
			 <view class="ico-li">
			 	<image src="../../static/img/user/icon-kefu.png"></image>
			 	<view class="li-text">
			 		<view>客服中心</view>
			 		<u-icon name="arrow-right" label-pos="right"></u-icon>
			 	</view>
			  </view>
			  <view class="ico-li">
			  	<image src="../../static/img/user/icon-collect.png"></image>
			  	<view class="li-text">
			  		<view>我的收藏</view>
			  		<u-icon name="arrow-right" label-pos="right"></u-icon>
			  	</view>
			   </view>
			   <view class="ico-li">
			   	<image src="../../static/img/user/icon-help.png"></image>
			   	<view class="li-text">
			   		<view>帮助中心</view>
			   		<u-icon name="arrow-right" label-pos="right"></u-icon>
			   	</view>
			    </view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapGetters('user',['getUser'])
		},
		
		methods: {
			gotoOrder(num){
				if(!this.$store.state.user.user.logons){
					uni.navigateTo({
						url:'/pagesG/logn/logn'
					});
					return;
				}
					uni.navigateTo({
						url:'/pagesC/order/order?index='+num,
					})
			},
			addr(){
				if(!this.$store.state.user.user.logons){
					uni.navigateTo({
						url:'/pagesG/logn/logn'
					});
					return;
				}
				uni.navigateTo({
					url:'/pagesI/addrList/addrList'
				})
			}
		}
	}
</script>

<style lang="scss">
	.info{
		background-color: #ececec;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		._image{
			height: 160px;
			text-align: center;
			color: white;
			
			.img2{
				width: 25px;
				height: 25px;
				position: absolute;
				top: 40px;
				left: 30px;
			}
		}
		._login{
			padding: 50px;
		}
		._login button{
			width: 120px;
			
		}
		.tou image{
			margin-top: 60px;
			width: 80px;
			height: 80px;
			border-radius: 50%;
		}
		.grid{
			width: 95%;
			margin: 10px auto;
			background-color: white;
			border-radius: 10px;
			.g-header{
				display: flex;
				padding: 10px;
			}
			.g-header image{
				width: 30px;
				height: 30px;
			}
			.g-text{
				color: gray;
				height: 30px;
				width: 100%;
				line-height: 30px;
				display: flex;
				justify-content: space-between;
				padding-left: 10px;
				padding-right: 10px;
				.g-t2{
					font-size: 25px;
				}
			}
			.gs{
				padding: 20px;
				display: flex;
				justify-content: space-between;
				text-align: center;
				border-top: 0.5px solid gainsboro
			}
			.gs image{
				width: 35px;
				height: 35px;
			}
		}
		.iconList{
			padding: 10px;
			.ico-ul{
				background-color: white;
				border-radius: 12px;
				.ico-li{
					padding: 10px;
					display: flex;
					border-bottom: 0.5px solid gainsboro;
					.li-text{
						display: flex;
						height: 30px;
						width: 100%;
						padding-left: 10px;
						padding-right: 10px;
						justify-content: space-between;
						line-height: 30px;
						.li-t2{
							font-size: 25px;
						}
					}
				}
				.ico-li:last-child{
					border: none;
				}
			}
		}
		.iconList image{
			width: 30px;
			height: 30px;
		}
	}
</style>
